<template>
  <div class="con table-gl-con">
    <a-layout class="layout-con">
      <!-- <a-layout-sider class="sider">
        <div class="title"> FBA库存报告</div>
        <div @click="typeHandleClick(index)" :class="['item', index == leftCurIndex ? 'active' : '']" v-for="(item, index) of typeList">{{ item.label }}</div>
      </a-layout-sider> -->

      <a-layout-content class="content">
        <a-tabs v-model:active-key="currentPage" style="background-color: white" size="mini">
          <a-tab-pane key="1" title="月汇总" />
          <a-tab-pane key="2" title="日汇总" />
        </a-tabs>
        <MonthlySummary v-if="currentPage == 1" :index="leftCurIndex" />
        <DailySummary v-else :index="leftCurIndex" />
      </a-layout-content>
    </a-layout>
  </div>
</template>

<script lang="ts">
  import { defineComponent, ref } from 'vue'
  import FilterTable from '@/components/TableFilter.vue'
  import TableWrap from '@/components/TableWrap.vue'
  import MonthlySummary from './components/monthlySummary.vue'
  import DailySummary from './components/dailySummary.vue'
  import { reactive } from 'vue'
  import { toRefs } from 'vue'
  export default defineComponent({
    components: {
      FilterTable,
      TableWrap,
      MonthlySummary,
      DailySummary,
    },
    setup() {
      const data: any = reactive({
        currentPage: '1',
        typeList: [
          { label: '库存分类账摘要', value: '1' },
          { label: '库存分类账详情', value: '2' },
          { label: '移除订单报告', value: '3' },
          { label: '退货记录', value: '4' },
          { label: 'FBA库存健康报告', value: '5' },
          { label: 'FBA仓储费报告', value: '6' },
        ],
        leftCurIndex: '0',
        monthlySummaryList: [],
        dailySummaryList: [],
        filterItem: [],
      })
      const typeHandleClick = (num: string) => {
        data.leftCurIndex = num
      }
      return {
        ...(toRefs(data) as any),
        typeHandleClick,
      }
    },
  })
</script>

<style lang="less" scoped>
  .con {
    height: calc(100vh - @headerHeight - @tabviewHeight);
    font-size: 12px;
    .layout-con {
      width: 100%;
      height: 100%;
    }
    .sider {
      width: 240px !important;
      height: 100%;
      padding: 5px 10px;
      overflow: hidden;
      .title {
        font-size: 16px;
        font-weight: 700;
      }
      .item {
        width: 100%;
        height: 40px;
        line-height: 40px;
        text-indent: 0.5em;
        font-size: 14px;
        background-color: var(--color-neutral-1);
        margin-top: 10px;
        &:hover {
          background-color: #e5e6eb;
        }
      }
      .active {
        background-color: #e5e6eb;
      }
    }
    .content {
      margin-left: 5px;
      .monthly-summary {
        height: calc(100vh - @menuAndTabHeight);
      }
      .daily-summary {
        height: calc(100vh - @menuAndTabHeight);
      }
    }
  }
</style>
